<script>
import "./index.scss"

const defaultButtonProps = {
  type: "warning"
}
export default {
  name: "BaseTable",
  props: {
    refreshBtn: {
      type: Boolean,
      default: false
    },
    selectable: {
      type: Function
    },
    tableData: {
      // table 数据
      type: Array,
      default: () => []
    },
    columns: {
      // table 的 column
      type: Array,
      default: () => []
    },
    buttons: {
      // table 按钮
      type: Array,
      default: () => []
    },
    tableBtnWidth: {
      // 按钮宽度
      type: [String, Number],
      default: 100
    },
    minHeight: {
      type: [String, Number]
    },
    tableTitle: {
      type: String,
      default: "数据列表"
    },
    getSouceData: {
      type: Function
    },
    fixed: {
      type: String,
      default: "right"
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    isShowTableBtnName: {
      type: Boolean,
      default: false
    },
    btnPosition: {
      type: String,
      default: "right"
    }
  },
  data() {
    return {
      defaultAttars: {
        // 按钮默认配置
        type: "text",
        size: "small",
        underline: false
      },
      linkDefault: {
        underline: false
      },
      tableHeight: 300
    }
  },
  watch: {
    $route(to, from) {
      this.setTableHeight()
    }
  },
  computed: {
    authList() {
      let authList = this.$store.getters.auth
      // console.log(
      // 	authList,
      // 	"this.$store.getters.auth",
      // 	authList.includes("punchConfig")
      // );
      return this.$store.getters.auth
    }
  },
  mounted() {
    this.setTableHeight()
  },
  methods: {
    setTableHeight() {
      this.$nextTick(() => {
        const tablePaging = document.getElementById("tablePaging")

        const clientHeight = window.screen.height
        // window.innerHeight ||
        // document.documentElement.clientHeight ||
        // document.body.clientHeight;
        const top = tablePaging.offsetTop || 0
        this.tableHeight = clientHeight - top - 250
      })
    },
    handleClick(e, id, click, index) {
      // 表单按钮点击
      e && e.stopPropagation && e.stopPropagation()
      click && click(id, index)
    },
    indexMethod(index) {
      // 序号格式化
      return index + 1
    },
    createslotScope(list) {
      return {
        scopedSlots: {
          default: (scope) => {
            return (
              list.length &&
              list.map((btn) => {
                if (btn.auth && !this.authList.includes(btn.auth)) {
                  return ""
                }
                if (btn.confirm) {
                  if (btn.render) {
                    if (btn.render(scope.row, scope.$index)) {
                      return (
                        <el-popconfirm
                          class="pop-confirm"
                          title={btn.confirm}
                          {...{
                            on: {
                              onConfirm: (e) =>
                                this.handleClick(
                                  e,
                                  scope.row,
                                  btn.click,
                                  scope.$index
                                )
                            }
                          }}
                        >
                          <el-button
                            slot="reference"
                            type="warning"
                            class={{
                              gray: btn.isGray
                            }}
                            {...{
                              props: {
                                ...this.defaultAttars,
                                ...btn.attrs
                              }
                            }}
                            {...btn.otherAttrs}
                          >
                            {btn.name}
                          </el-button>
                        </el-popconfirm>
                      )
                    }
                  } else {
                    return (
                      <el-popconfirm
                        class="pop-confirm"
                        title={btn.confirm}
                        {...{
                          on: {
                            onConfirm: (e) =>
                              this.handleClick(
                                e,
                                scope.row,
                                btn.click,
                                scope.$index
                              )
                          }
                        }}
                      >
                        <el-button
                          slot="reference"
                          type="warning"
                          class={{ gray: btn.isGray }}
                          {...{
                            props: {
                              ...this.defaultAttars,
                              ...btn.attrs
                            }
                          }}
                          {...btn.otherAttrs}
                        >
                          {btn.name}
                        </el-button>
                      </el-popconfirm>
                    )
                  }
                }
                if (btn.render) {
                  if (btn.render(scope.row, scope.$index)) {
                    return (
                      <el-button
                        class={{ gray: btn.isGray }}
                        type="warning"
                        {...{
                          on: {
                            click: (e) =>
                              this.handleClick(
                                e,
                                scope.row,
                                btn.click,
                                scope.$index
                              )
                          }
                        }}
                        {...{
                          props: {
                            ...this.defaultAttars,
                            ...btn.attrs
                          }
                        }}
                        {...btn.otherAttrs}
                      >
                        {btn.name}
                      </el-button>
                    )
                  }
                } else {
                  let styles = btn.style && btn.style(scope.row)
                  if (styles) {
                    styles.margin = "0 3px"
                  } else {
                    styles = {}
                    styles.margin = "0 3px"
                  }
                  return (
                    <el-link
                      class={{ gray: btn.isGray }}
                      {...{
                        on: {
                          click: (e) =>
                            this.handleClick(
                              e,
                              scope.row,
                              btn.click,
                              scope.$index
                            )
                        }
                      }}
                      disabled={btn.disabled && btn.disabled(scope.row)}
                      {...{
                        props: {
                          ...this.linkDefault,
                          ...btn.attrs
                        }
                      }}
                      style={styles}
                      {...btn.otherAttrs}
                    >
                      {btn.name || btn.nameStr(scope.row)}
                    </el-link>
                  )
                }
              })
            )
          }
        }
      }
    }
  },
  render(h) {
    const { tableTitle } = this
    return (
      <div class="base-table" id="tablePaging">
        {this.showHeader ? (
          <div class="base-table-header">
            {this.isShowTableBtnName ? (
              <span
                {...{
                  domProps: {
                    innerHTML: tableTitle // 这里是要渲染的数据
                  }
                }}
              ></span>
            ) : this.btnPosition == "right" ? (
              <span
                {...{
                  domProps: {
                    innerHTML: "" // 这里是要渲染的数据
                  }
                }}
              ></span>
            ) : (
              ""
            )}
            <div>
              {this.refreshBtn ? (
                <el-button
                  {...{
                    props: { type: "warning" },
                    on: {
                      click: this.getSouceData
                    }
                  }}
                  key="refresh"
                >
                  刷新
                </el-button>
              ) : (
                ""
              )}
              {this.buttons.map((item, index) => {
                if (item.auth && !this.authList.includes(item.auth)) {
                  return ""
                }
                if (item.render) {
                  if (!item.render(h)) {
                    return ""
                  } else {
                    return item.render(h)
                  }
                }

                if (item.type === "slot") {
                  return (
                    <el-dropdown
                      key={index}
                      {...{
                        props: {
                          ...defaultButtonProps,
                          ...item
                        },
                        on: { command: item.command }
                      }}
                    >
                      <el-button>
                        {item.name}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        {item.list.map((v) => {
                          if (btn.auth && !this.authList.includes(btn.auth)) {
                            return ""
                          }
                          return (
                            <el-dropdown-item command={v.command}>
                              {v.name}
                            </el-dropdown-item>
                          )
                        })}
                      </el-dropdown-menu>
                    </el-dropdown>
                  )
                }
                return (
                  <el-button
                    {...{
                      props: {
                        ...defaultButtonProps,
                        ...item
                      },
                      on: { click: item.click }
                    }}
                    style={item.style && item.style()}
                    disabled={item.isdisabled && item.isdisabled()}
                    key={index}
                  >
                    {item.name}
                  </el-button>
                )
              })}
            </div>
          </div>
        ) : (
          ""
        )}
        <el-table
          ref="table"
          data={this.tableData}
          {...{ props: this.$attrs, on: this.$listeners }}
          height="100%"
          header-cell-style={{ background: "#F7F7F8" }}
        >
          {this.columns.map((item) => {
            if (item.type === "button") {
              return (
                <el-table-column
                  align={item.align || "center"}
                  label={item.label || "操作"}
                  width={item.width || this.tableBtnWidth}
                  fixed={item.fixed || "right"}
                  {...this.createslotScope(item.list)}
                ></el-table-column>
              )
            }
            if (item.type === "index") {
              return (
                <el-table-column
                  align={item.align || "center"}
                  type="index"
                  label={item.label || "序号"}
                  width="60"
                ></el-table-column>
              )
            }

            if (item.type === "selection") {
              return (
                <el-table-column
                  align={item.align || "center"}
                  type="selection"
                  key="selection"
                  width={item.width || 50}
                  fixed={"left"}
                  selectable={this.selectable}
                ></el-table-column>
              )
            }
            if (item.type === "slot") {
              return (
                <el-table-column
                  show-overflow-tooltip
                  align={item.align || "center"}
                  width={item.width}
                >
                  <slot name={item.key}></slot>
                </el-table-column>
              )
            }
            return (
              <el-table-column
                show-overflow-tooltip
                key={item.key}
                type={item.type}
                prop={item.key}
                label={item.label}
                width={item.width}
                fixed={item.fixed}
                align={item.align || "center"}
                min-width={item.minWidth}
                {...{
                  scopedSlots: {
                    default: (scope) => {
                      return item.render
                        ? item.render(h, scope, scope.row[item.key])
                        : scope.row[item.key]
                    }
                  }
                }}
              />
            )
          })}
        </el-table>
      </div>
    )
  }
}
</script>

<style lang="scss">
.el-dropdown {
  margin: 0 10px;
}
.base-table-header {
  & > span {
    font-weight: 480;
    b {
      color: red;
    }
  }
}
.el-table__row .cell .el-button span {
  font-size: 14px;
}
.el-table-con .cell button {
  width: 100%;
  white-space: pre-wrap;
}
</style>
